<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <link
      rel="stylesheet"
      href="https://webglfundamentals.org/webgl/resources/webgl-tutorials.css"
    />
    <style>
      body {
        margin: 0;
      }
      canvas {
        width: 100vw;
        height: 100vh;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <script id="vertex-shdaer-2d" type="notjs">
      attribute vec4 a_position;

      void main() {
          gl_Position = a_position;
      }
    </script>
    <script id="fragment-shader-2d" type="notjs">
      precision mediump float;
      void main() {
          gl_FragColor = vec4(1,0,0.5, 1);
      }
    </script>

    <script>
      function createShader(gl, type, source) {
        let shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
          return shader;
        }
        console.log(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
      }

      function createProgram(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (success) {
          return program;
        }
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
      }

      let canvas = document.querySelector("#c");
      let gl = canvas.getContext("webgl");
      if (!gl) {
      }

      let vertexShaderSource = document.querySelector("#vertex-shdaer-2d").text;
      let fragmentShaderSource = document.querySelector(
        "#fragment-shader-2d"
      ).text;

      let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
      let fragmentShader = createShader(
        gl,
        gl.FRAGMENT_SHADER,
        fragmentShaderSource
      );

      let program = createProgram(gl, vertexShader, fragmentShader);

      let positionAttributeLocation = gl.getAttribLocation(
        program,
        "a_position"
      );
    </script>
  </body>
</html>
